<template>
  <div class="noticeSend">
    <home-page-top/>
    <div class="info-h-lis">
      <ul>
        <li>
          <a href="javascript:void(0)" @click="$router.push('/notice/index?type=system')">系统消息</a>
        </li>
        <img src="../../assets/info-head-line.png">
        <li>
          <a href="javascript:void(0)" @click="$router.push('/notice/index?type=site')" class="activeTab">站内消息</a>

        </li>
        <img src="../../assets/info-head-line.png">
        <li>
          <a href="javascript:void(0)" @click="$router.push('/notice/index?type=setting')">消息设置</a>
        </li>
        <button onclick="window.infoSend()">发消息</button>
      </ul>
    </div>
    <div v-if="siteDetailData.list.length">
      <div class="info-re-head">
        <i>回复</i>
        <a href="javascript:void(0)">{{siteDetailData.list[0].senderAccount === curUser?siteDetailData.list[0].receiverAccount:siteDetailData.list[0].senderAccount}}</a>
      </div>
      <div class="info-re-con">
        <textarea v-model="content" class="info-re-c-are" maxlength='200' id='info-send-are' onchange='this.value=this.value.substring(0, 200)' onkeydown='this.value=this.value.substring(0, 200)' onkeyup='this.value=this.value.substring(0, 200);infoTxtLimt(this,200)'></textarea>
        <div class="info-re-c-are-lim">
          您还可以输入
          <i id='info-send-count'>200</i>个字符
        </div>
        <div class="info-re-but">
          <button @click="sendMessage()">发送</button>
          <button @click="$router.push('/notice/index?type=site')">返回</button>
        </div>
        <ul class="info-re-lis" id="info-re-lis">
          <div v-for="(item, index) in siteDetailData.list" :key="index">
            <li v-if="item.senderAccount !== curUser">
              <a href="javascript:void(0)">
                <span class="info-re-c-p"><img :src="item.avatar"></span>
              </a>
              <span class="info-re-c-con">
                <a href="javascript:void(0)">{{item.senderAccount+'：'}}</a>
                <i style="word-wrap: break-word;">{{item.messageContent}}</i>
                <span class="info-re--c-time">
                  {{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
                </span>
                <p @click="removeSiteSingleMessage(item.messageId)">删除</p>
              </span>
            </li>
            <li v-else>
              <a href="javascript:void(0)">
                <span class="info-re-c-p">
                  <!-- <img v-if="item.avatar&&/^[0-9]$/.test(item.avatar)" :src="defaultAvatar" id="basInfoImg" class="layui-upload-img">
                  <img v-if="item.avatar&&!/^[0-9]$/.test(item.avatar)" :src="item.avatar" id="basInfoImg" class="layui-upload-img"> -->
                  <img :src="item.avatar" class="layui-upload-img">
                </span>
              </a>
              <span class="info-re-c-con">
                <a href="javascript:void(0)">我</a>
                <span>发送给</span>
                <a href="javascript:void(0)">{{item.receiverAccount+'：'}}</a>
                <i style="word-wrap: break-word;">{{item.messageContent}}</i>
                <span class="info-re--c-time">
                  {{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
                </span>
                <p @click="removeSiteSingleMessage(item.messageId)">删除</p>
              </span>
            </li>
          </div>
        </ul>
      </div>
      <!--** 分页 ***-->
      <laypage v-if="total" :pageSize.sync="pageSize" :total="total" :pageNum.sync="pageNum" @changePage="getSiteDetail"></laypage>
      <!--** 分页 end ***-->
    </div>
  </div>
</template>
<script>
import HomePageTop from '@/components/home-page-top'
import Laypage from '@/components/laypage'
import * as api from '@/service/api'
import { mapState } from 'vuex'
export default {
  title: '用户中心-消息',
  data () {
    return {
      activeTab: 'site',
      total: null,
      pageSize: 10,
      pageNum: 1,
      content: '',
      dataPoints: null,
      defaultAvatar: '',
      defaultImg: '',
      siteDetailData: {
        list: []
      }
    }
  },
  components: {
    HomePageTop,
    Laypage
  },
  computed: {
    curId () {
      return this.$route.query.id
    },
    curUser () {
      return this.$store.state.me.user.userAccount
    },
    ...mapState({
      userInfo: state => state.me.user || {}
    })
  },
  created () {
    this.getSiteDetail()
    this.readSiteNotice()
  },
  mounted () {
    this.defaultAvatar = `static/img/avatar${this.userInfo.avatar}.png`
    this.defaultImg = 'static/img/avatar1.png'
  },
  watch: {
    userInfo () {
      if (this.userInfo.avatar) {
        this.defaultAvatar = `static/img/avatar${this.userInfo.avatar}.png`
        this.defaultImg = 'static/img/avatar1.png'
      }
    }
  },
  methods: {
    async getSiteDetail (page) {
      if (page) {
        this.pageNum = page
      }
      try {
        let res = await api.getSiteDetail({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          messageId: this.curId
        })
        this.siteDetailData = res.data
        this.total = this.siteDetailData.total
      } catch (e) {
        console.log(e)
      }
    },
    async readSiteNotice () {
      try {
        await api.readSiteNotice({
          ids: this.curId
        })
        this.$store.dispatch('getUserInfo')
      } catch (e) {
        console.log(e)
      }
    },
    async sendMessage () {
      try {
        await api.sendMessage({
          receiverId: this.userInfo.userId === this.siteDetailData.list[0].senderId ? this.siteDetailData.list[0].receiverId : this.siteDetailData.list[0].senderId,
          messageContent: this.content
        })
        this.content = ''
        this.getSiteDetail()
        window.layer.msg('发送成功！', {
          icon: 1,
          time: 1000
        })
      } catch (e) {
        console.log(e)
      }
    },
    removeSiteSingleMessage (messageId) {
      let that = this
      window.layer.open({
        type: 1,
        offset: 'auto',
        id: 'layerDemo' + 'auto', // 防止重复弹出
        content: '<div style="padding: 20px 100px;">确认删除此条消息吗</div>',
        btn: '确认',
        // closeBtn: 1,
        btnAlign: 'c',
        shade: 0,
        yes: function () {
          api.removeSiteSingleMessage({
            messageId: messageId
          }).then(() => {
            that.getSiteDetail()
          })
          window.layer.closeAll()
        }
      })
    }
  }
}
</script>
<style lang="scss">
.noticeSend {
  .activeTab {
    color: #f04e2d;
  }
}
</style>
